<template>
  <page-container>
    <a-card :bordered="false" :bodyStyle="{paddingBottom:'0'}">
      <div class="ant-descriptions-title">收益统计</div>
      <a-form layout="inline">
        <a-form-item label="时间范围">
          <a-range-picker v-model="dateRange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="getProviderWalletStat">查询</a-button>
        </a-form-item>
      </a-form>
      <a-spin :spinning="loadingStat">
        <stat-info :wallet="wallet" />
      </a-spin>
    </a-card>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="ant-descriptions-title">服务商收益</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入名称/电话" v-model="queryParam.search"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="uid"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <span slot="actions" slot-scope="text, record">
          <template>
            <a @click="handleDetail(record.uid)">详情</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-container>
</template>

<script>
import { providerWalletList, providerWalletStat } from '@/api/stat'
import formTableMixin from '@/mixins/formTableMixin'
import statInfo from '@/components/stat-info/stat-info'
import moment from 'moment'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  {
    title: '区',
    dataIndex: 'area'
  },
  {
    title: '钱包总金额',
    dataIndex: 'wallet.all_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '已取款金额',
    dataIndex: 'wallet.take_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '可取款金额',
    dataIndex: 'wallet.usable_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'actions' }
  }
]

export default {
  name: 'ProviderWallet',
  mixins: [formTableMixin],
  components: {
    statInfo
  },
  data () {
    this.columns = columns
    this.listAction = providerWalletList
    return {
      dateRange: [],
      loadingStat: false,
      wallet: {}
    }
  },
  created () {
    this.getProviderWalletStat()
  },
  methods: {
    handleDetail (uid) {
      this.$router.push({
        name: 'storeWalletDetail',
        query: {
          uid,
          type: this.$route.query.store_type,
          walletType: 'provider'
        }
      })
    },
    getProviderWalletStat () {
      this.loadingStat = true
      const [atime, etime] = this.dateRange
      const params = { atime: atime && atime.format(atime._f), etime: etime && etime.format(etime._f) }
      providerWalletStat(params).then(res => {
        this.wallet = Object.assign({ sum_price: res.data.stat.sum_price }, res.data.wallet)
        const { atime, etime } = res.data.stat
        this.dateRange = [moment(atime, 'YYYY-MM-DD'), moment(etime, 'YYYY-MM-DD')]
      }).finally(() => (this.loadingStat = false))
    }
  }
}
</script>
